<template>
  <p-form-model
    ref="ruleForm"
    layout="inline"
    :model="form"
    :rules="addState ? rules : []"
    class="form"
  >
    <div class="connect">
      <div class="connect_form">
        <p-form-model-item
          label="产品编号"
          prop="productNo"
          style="width: 100%"
        >
          <span class="from-input">{{ form.productNo }}</span>
        </p-form-model-item>
        <p-form-model-item
          label="产品名称"
          prop="name"
          class="form-item"
          style="width: 100%"
        >
          <p-input v-if="addState" v-model="form.name" class="from-input" />
          <span v-if="!addState" class="from-input">
            {{ form.name }}
          </span>
        </p-form-model-item>
        <p-form-model-item
          label="CG盖板"
          prop="cover"
          class="form-item"
          style="width: 100%"
        >
          <SelectDefault
            v-if="addState"
            v-model="form.cover"
            class="from-input"
            code="product_cover"
          />
          <span v-if="!addState" class="from-input">
            {{ coverOptions[form.cover] }}
          </span>
        </p-form-model-item>
        <p-form-model-item label="出货形态" prop="form" style="width: 100%">
          <SelectDefault
            v-if="addState"
            v-model="form.form"
            class="from-input"
            code="product_from"
          />
          <span v-if="!addState" class="from-input">
            {{ formOptions[form.form] }}
          </span>
        </p-form-model-item>
        <p-form-model-item
          label="技术别"
          prop="technology"
          class="form-item"
          style="width: 100%"
        >
          <p-input
            v-if="addState"
            v-model="form.technology"
            :disabled="disabled"
            class="from-input"
            :style="
              disabled
                ? 'background-color: #fff; cursor: default; color: #000;width: 100%'
                : 'width: 100%'
            "
          />
          <span v-if="!addState" class="from-input">
            {{ form.technology }}
          </span>
        </p-form-model-item>
        <p-form-model-item
          label="Bonding"
          prop="bonding"
          class="form-item"
          style="width: 100%"
        >
          <p-input
            v-if="addState"
            v-model="form.bonding"
            :disabled="disabled"
            :style="
              disabled
                ? 'background-color: #fff; cursor: default; color: #000;width: 100%'
                : 'width: 100%'
            "
            class="from-input"
          />
          <span v-if="!addState" class="from-input">
            {{ form.bonding }}
          </span>
        </p-form-model-item>
        <p-form-model-item
          label="刷新率"
          prop="refreshRate"
          style="width: 100%"
        >
          <p-input
            v-if="addState"
            v-model="form.refreshRate"
            :disabled="disabled"
            class="from-input"
            :style="
              disabled
                ? 'background-color: #fff; cursor: default; color: #000;width: 100%'
                : 'width: 100%'
            "
          />
          <span v-if="!addState" class="from-input">
            {{ form.refreshRate }}
          </span>
        </p-form-model-item>
        <p-form-model-item
          label="屏幕类型"
          prop="screenType"
          class="form-item"
          style="width: 100%"
        >
          <SelectDefault
            v-if="addState"
            v-model="form.screenType"
            class="from-input"
            code="product_screen"
          />
          <span v-if="!addState" class="from-input">
            {{ screenOptions[form.screenType] }}
          </span>
        </p-form-model-item>
      </div>
      <div class="connect_form">
        <p-form-model-item label="产品状态" prop="state" style="width: 100%">
          <span class="from-input">
            {{ stateOptions[form.state] }}
          </span>
        </p-form-model-item>
        <p-form-model-item label="产品类型" prop="type" style="width: 100%">
          <SelectDefault
            v-if="addState"
            v-model="form.type"
            class="from-input"
            code="product_type"
            @validate="validate"
          />
          <span v-if="!addState" class="from-input">
            {{ typeOptions[form.type] }}
          </span>
        </p-form-model-item>
        <p-tooltip placement="top" :title="form.modelName">
          <p-form-model-item
            label="机种"
            prop="modelName"
            class="form-item"
            style="width: 100%"
          >
            <p-input
              v-if="addState"
              v-model="form.modelName"
              disabled
              class="from-input"
              style="background-color: #fff; cursor: default; color: #000"
            />
            <InputSearch
              v-if="addState"
              :is-edit="true"
              class="searchIcon"
              @search="visibleModelName = true"
            />
            <span v-if="!addState" class="model">
              {{ form.modelName }}
            </span>
          </p-form-model-item>
        </p-tooltip>
        <p-form-model-item label="尺寸" prop="size" style="width: 100%">
          <p-input
            v-if="addState"
            v-model="form.size"
            :disabled="disabled"
            class="from-input"
            :style="
              disabled
                ? 'background-color: #fff; cursor: default; color: #000;width: 100%'
                : 'width: 100%'
            "
          />
          <span v-if="!addState" class="from-input">
            {{ form.size }}
          </span>
        </p-form-model-item>
        <p-form-model-item label="分辨率" prop="resolution" style="width: 100%">
          <p-input
            v-if="addState"
            v-model="form.resolution"
            :disabled="disabled"
            class="from-input"
            :style="
              disabled
                ? 'background-color: #fff; cursor: default; color: #000;width: 100%'
                : 'width: 100%'
            "
          />
          <span v-if="!addState" class="from-input">
            {{ form.resolution }}
          </span>
        </p-form-model-item>
        <p-form-model-item label="Notch" prop="notch" style="width: 100%">
          <p-input
            v-if="addState"
            v-model="form.notch"
            :disabled="disabled"
            class="from-input"
            :style="
              disabled
                ? 'background-color: #fff; cursor: default; color: #000;width: 100%'
                : 'width: 100%'
            "
          />
          <span v-if="!addState" class="from-input">
            {{ form.notch }}
          </span>
        </p-form-model-item>
        <p-form-model-item label="亮度" prop="brightness" style="width: 100%">
          <p-input
            v-if="addState"
            v-model="form.brightness"
            class="from-input"
            :disabled="disabled"
            :style="
              disabled
                ? 'background-color: #fff; cursor: default; color: #000;width: 100%'
                : 'width: 100%'
            "
          />
          <span v-if="!addState" class="from-input">
            {{ form.brightness }}
          </span>
        </p-form-model-item>
      </div>
    </div>
    <p-form-model-item
      label="备注"
      prop="remark"
      :class="addState ? 'isremark' : 'remark'"
    >
      <p-textarea
        v-if="addState"
        v-model="form.remark"
        style="height: 60px; width: 100%; resize: none"
      />
      <span v-if="!addState">
        {{ form.remark }}
      </span>
    </p-form-model-item>
    <div
      :style="
        addState
          ? 'margin-top: 30px; margin-bottom: 20px'
          : 'margin-top: 10px; margin-bottom: 20px'
      "
    >
      <div>
        <span style="margin-left: 40px; margin-right: 10px; margin-top: 30px">
          订单附件:
        </span>
        <p-button :disabled="!addState" @click="upLoad">
          <p-icon type="upload" />
        </p-button>
        <p-tooltip
          placement="top"
          title="附件上传的格式：xls,
        xlsx,
        doc,
        docx,
        ppt,
        pptx,
        gif,
        png,
        jpg,
        jpeg
        pdf,
        rar,
        zip,"
        >
          <p-icon
            type="question-circle"
            style="color: blue; margin-left: 20px"
          />
        </p-tooltip>
      </div>
      <div>
        <span
          v-for="(item, i) in list"
          :key="item.id"
          style="margin-left: 110px; display: block; padding: 3px 0"
        >
          <a :href="item.atthAccessPath">{{ item.atthName }}</a>
          <p-icon
            v-if="addState"
            type="delete"
            style="color: rgb(24, 144, 255); cursor: pointer"
            @click="deleteFile(item, i)"
          />
        </span>
      </div>
      <div v-show="isload" style="margin-left: 110px; margin-top: 10px">
        <p-spin tip="附件上传中" size="small" />
      </div>
    </div>
    <div v-if="isFoot" class="connect2">
      <div class="connect_form">
        <p-form-model-item
          label="创建人"
          prop="createUserName"
          style="width: 100%"
        >
          <span class="from-input">{{ form.createUserName }}</span>
        </p-form-model-item>
        <p-form-model-item label="创建人部门" style="width: 100%">
          <span class="from-input">{{ form.createDepartment }}</span>
        </p-form-model-item>
        <p-form-model-item
          label="创建时间"
          prop="createTime"
          style="width: 100%"
        >
          <span class="from-input">{{ form.createTime }}</span>
        </p-form-model-item>
      </div>
      <div class="connect_form">
        <p-form-model-item label="修改人" style="width: 100%">
          <span class="from-input">{{ form.updateUserName }}</span>
        </p-form-model-item>
        <p-form-model-item label="修改人部门" style="width: 100%">
          <span class="from-input">{{ form.updateDepartment }}</span>
        </p-form-model-item>
        <p-form-model-item
          label="修改时间"
          prop="updateTime"
          style="width: 100%"
        >
          <span class="from-input">{{ form.updateTime }}</span>
        </p-form-model-item>
      </div>
    </div>
    <div class="container">
      <ProgressLog v-if="!addState" :list="form.logList" />
      <BottomLine />
    </div>
    <DialogUserList :visible.sync="visibleCustomer" @change="changeCustomer" />
    <DialogOpportunityList
      :visible.sync="visibleOpportunity"
      @change="changeOpportunity"
    />
    <DialogLegalNoList
      :customer-name="customerName"
      :data-source="dataSource"
      :visible.sync="visibleLegalNo"
      @change="changeLegalNo"
    />
    <DialogChooseModel
      :visible.sync="visibleModelName"
      @change="changeModelName"
    />
    <DialogUpAttachment
      ref="upload"
      :list.sync="list"
      :file-list.sync="fileList"
      :isload.sync="isload"
      type="product"
      @change="handleInsertChange"
    />
  </p-form-model>
</template>

<script>
import { getDeleteFile } from '@/api/order.js';
import ProgressLog from '@/components/task/ProgressLog.vue';
import DialogUserList from '@/components/dialog/DialogUserList.vue';
import DialogOpportunityList from '@/components/dialog/DialogOpportunityList.vue';
import DialogLegalNoList from '@/components/dialog/DialogLegalNoList.vue';
import DialogChooseModel from '@/components/dialog/DialogChooseModel.vue';
import DialogUpAttachment from '@/components/dialog/DialogUpAttachment.vue';
import monent from 'moment';

export default {
  components: {
    DialogUserList,
    DialogOpportunityList,
    DialogLegalNoList,
    DialogChooseModel,
    DialogUpAttachment,
    ProgressLog,
  },
  props: {
    form: {
      type: Object,
      default: () => ({}),
    },
    addState: {
      type: Boolean,
      default: false,
    },
    isFoot: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      headers: {
        authorization: 'authorization-text',
      },
      fileList: [],
      list: [],
      customerName: '',
      dataSource: [],
      visibleLegalNo: false,
      parentId: '',
      hasAll: false,
      isload: false,
      visibleCustomer: false,
      visibleOpportunity: false,
      visibleModelName: false,
      isDetail: false,
      updateUserGroup: '',
      rules: {
        name: [{ required: true, message: '请输入产品名称', trigger: 'blur' }],
        type: [
          { required: true, message: '请选择产品类型', trigger: 'change' },
        ],
        modelName: [{ required: true, message: '请选择机种', trigger: 'blur' }],
        remark: [{ max: 255, message: '输入的内容过长', trigger: 'blur' }],
      },
    };
  },
  computed: {
    stateOptions() {
      return this.$store.state.dictionary.dict['product_status'] || {};
    },
    typeOptions() {
      return this.$store.state.dictionary.dict['product_type'] || {};
    },
    formOptions() {
      return this.$store.state.dictionary.dict['product_from'] || {};
    },
    coverOptions() {
      return this.$store.state.dictionary.dict['product_cover'] || {};
    },
    screenOptions() {
      return this.$store.state.dictionary.dict['product_screen'] || {};
    },
  },
  watch: {
    form: {
      handler(val) {
        console.log('val: ', val);
        const attachmentList = val.attachmentList;
        console.log('attachmentList: ', attachmentList);
        if (attachmentList !== undefined) {
          if (attachmentList.length) {
            attachmentList.forEach((item) => {
              this.list.push({
                atthName: item.atthName,
                atthAccessPath: item.atthAccessPath,
                id: item.id,
              });
            });
          }
        }
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    async deleteFile(item, i) {
      const result = await getDeleteFile(item.id);
      if (result.data.code === 0) {
        this.list.splice(i, 1);
      }
    },
    upLoad() {
      this.$refs.upload?.uploader();
    },
    validate() {
      return new Promise((resolve) => {
        this.$refs.ruleForm.validate((valid) => {
          resolve(valid);
        });
      });
    },

    disabledDate(val) {
      return monent().endOf('day').subtract(1, 'day').valueOf() > val.valueOf();
    },

    // handleDeadLineOk(value) {
    //   const formatTime = monent(value).format('YYYY-MM-DD 23:59:59');
    //   this.form.orderTime = formatTime;
    // },
    // handleDeadLineChange(value) {
    //   const formatTime = monent(value).format('YYYY-MM-DD 23:59:59');
    //   this.form.orderTime = formatTime;
    // },
    changeLegalNo(value) {
      this.form.legalNo = value?.label || '';
    },
    changeCustomer(val) {
      this.form.customerName = val?.label || '';
      this.form.customerCode = val?.key || '';
    },
    changeOpportunity(val) {
      this.form.opportunityNo = val?.key || '';
      this.form.opportunityName = val?.label || '';
    },
    changeModelName(val) {
      this.form.modelName = val?.modelName || '';
      this.form.technology = val?.technology || '';
      this.form.bonding = val?.bonding || '';
      this.form.state = '1';
      this.form.modelId = val?.id || '';
      this.form.size = val?.size || '';
      this.form.resolution = val?.resolution || '';
      this.form.refreshRate = val?.refreshRate || '';
      this.form.notch = val?.notch || '';
      this.form.brightness = val?.lightness || '';
      if (val.provisional === '0') {
        this.$emit('update:disabled', true);
      } else {
        this.$emit('update:disabled', false);
      }
      this.validate();
    },
    changeHandle(val) {
      this.form.salesGroup = val;
    },

    handleChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        this.$message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.connect {
  width: 100%;
  display: flex;
  justify-content: center;
}
.connect2 {
  margin-top: 10px;
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
}
.connect_form {
  width: 49%;
  height: 100%;
  display: inline-block;
}
// .from-input {
//   width: 320%;
// }
.row {
  margin-top: 20px;
}
.form {
  /deep/ .poros-form-item {
    margin-bottom: 20px;
  }
  /deep/ .poros-form-item-label {
    width: 90px !important;
  }
  /deep/ .poros-form-item-control-wrapper {
    width: calc(100% - 250px);
  }
  // /deep/ .poros-row {
  //   height: auto;
  // }
}
.load {
  margin-top: 50px !important;
}
.form-item {
  position: relative;
  .copy-clue {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(110%, -25%);
  }
  .searchIcon {
    position: absolute;
    top: 0;
    right: 5px;
  }
}
.disinput {
  background-color: #fff;
  cursor: default;
  color: #000;
  width: 85%;
  margin-right: 2%;
}
.isremark {
  width: 100%;
  margin-left: 12px;
  height: 60px;
}
.remark {
  width: 100%;
  margin-left: 12px;
  height: auto !important;
}
// /deep/ .poros-upload-list {
//   display: inline-block;
// }
/deep/ .poros-upload-list-item {
  margin-left: 100px;
}
/deep/ .anticon {
  margin-left: 5px;
}
.container {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  position: relative;
  box-sizing: border-box;
  padding: 10px 24px;
  margin-top: 40px;
}
.model {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/deep/ .poros-row {
  height: 32px;
}
/deep/ .poros-input {
  padding-right: 25px;
}
</style>